<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办事项</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="element-ui-css.css">
</head>
<body>
    <div id="app" v-cloak>
        <p></p>
        <el-button type="primary" icon="el-icon-edit" @click="dialogFormVisible=true;dt='';na=''" style="float: left;margin-left: 30%;" circle></el-button>
        <el-button type="danger" icon="el-icon-delete" @click="clear()" style="float: right;margin-right: 30%;" circle></el-button>
        <div style="height: 40px;">
            <el-dialog title="添加任务" :visible.sync="dialogFormVisible">
                <p style="margin-bottom: 20px;"><span style="float: left;">Task：</span><el-input type="text" v-model="na" style="float: right;"></el-input></p>
                <el-date-picker
                    v-model="dt"
                    type="datetime"
                    :editable="false"
                    format="yyyy-MM-dd HH:mm"
                    value-format="yyyy-MM-dd#HH:mm"
                    placeholder="选择日期时间" >
                </el-date-picker>
                <el-button type="primary" @click="show();dialogFormVisible=false;" style="float: center;margin-top: 20px;">添 加</el-button>
              </el-dialog>
        </div>
        <div>
            <p v-show="works==null||works==''?true:false">
                <el-result icon="info" title="暂无数据">
                </el-result>
            </p>
        </div>
        <div >
            <p v-for="item in works" style="margin-bottom: 10px;">
                <el-button :icon="item.finish?'el-icon-success':'el-icon-aim'" @click="turn(item)" style="float: left;margin-right: 8px;margin-top: 5px;" circle></el-button>
                <el-alert
                    :title="item.name"
                    :description="'截止日期：' + item.deadline + '  ' + item.time"
                    :type="item.finish?'success':item.exp?'error':'warning'"
                    :closable="false"
                    style="font-weight: bolder;width: 95%;"
                    show-icon>
                </el-alert>
            </p>
        </div>
    </div>
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入vue框架-->
    <script src="vue.js"></script>
    <script src="element-ui-index.js"></script>
    <script>
        class Storage{
            //设置缓存
            setItem(name, obj){
                localStorage.setItem(name,JSON.stringify(obj));
            }
            //拿到缓存
            getItem(name){
                return localStorage.getItem(name);
            }
            //移出缓存
            removeItem(name){
                localStorage.removeItem(name);
            }
            //移出全部缓存
            clear(){
                localStorage.clear();
            }
        }
        var storage = new Storage();
        function saveData(){
            storage.setItem("work", app.works)
        }
        window.onbeforeunload = function(){
            saveData()
        }
        var app = new Vue({
        el: '#app',
        data: function() {
            return {
                works: [],
                dt:'',
                dialogFormVisible: false,
                na:'',
            }
        },
        mounted(){
            console.log(storage.getItem("work"));
            let a = storage.getItem("work")
            let data = eval('(' + a + ')')
            console.log("data=>" + data);
            if(data == null){
                console.log("not found");
                this.works = []
            }else{
                this.works = data
                this.resort()
                console.log("read finish");
                console.log("works:" + this.works);
                this.autoClear()
            }
        },
        methods:{
            turn(item){
                item.finish = !item.finish
                if(item.finish){
                    item.exp = false
                }
            },
            resort(){
                var compare = function (obj1, obj2) {
                    var val1day = obj1.deadline;
                    var val2day = obj2.deadline;
                    var val1time = obj1.time;
                    var val2time = obj2.time;
                    if (val1day < val2day) {
                        return -1;
                    } else if (val1day > val2day) {
                        return 1;
                    } else {
                        if (val1time < val2time) {
                            return -1;
                        } else if (val1time > val2time) {
                            return 1;
                        } else{
                            return 0;
                        }
                    }            
                }
                this.works.sort(compare)
            },
            show(){
                if(this.na != '' && this.dt != ''){
                    let arr = this.dt.split("#")
                    let na = this.na
                    let obj = {
                        name: na,
                        deadline: arr[0],
                        time:arr[1],
                        finish:false,
                        exp:false,
                    }
                    this.works.push(obj)
                }
            },
            autoClear(){
                let date = new Date();
                let nowday = date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate()
                let h = date.getHours()
                let m = date.getMinutes() 
                let nowtime = (h<10?'0'+h:h)  + ":" + (m<10?'0'+m:m)
                this.works = this.works.filter(function(obj){
                    console.log(obj.deadline + " == " + nowday + " --> " + (obj.deadline < nowday))
                    if(obj.deadline < nowday){
                        if(!obj.finish){
                            obj.exp = true
                            return true
                        }
                        return false
                    }else if(obj.deadline == nowday){
                        console.log(obj.time + " == " + nowtime + " --> " + (obj.time < nowtime))
                        if(obj.time <= nowtime){
                            if(!obj.finish){
                                obj.exp = true
                                return true
                            }
                            return false
                        }
                    }
                    if(obj.finish){
                        return false
                    }
                    return true
                })
            },
            clear(){
                const t = this
                this.$confirm('此操作将删除所有任务, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                    t.works=[]
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            }
        },
    })
    </script>
</body>
<style>
[v-cloak]{
    display: none;
}
</style>

</html>